import * as React from 'react'
import { observable,action } from 'mobx'
import { observer, inject } from 'mobx-react'
import {Link} from "react-router-dom"
import FN from '../tools/fn'
import Server from "../../service/app"
import LazyLoad from 'react-lazyload';
import InfiniteScroll from 'react-infinite-scroller';
import { forceCheck } from 'react-lazyload';
import ItemLoading from "../../components/listLoading"
import { Router, Switch, Redirect, withRouter, Link,Route,NavLink} from 'react-router-dom'

@inject('articleList')
@inject('article')
@withRouter
@observer
export default class List extends React.Component {
    // @observable page = 0;
    // @observable list = [];
    // @observable hasMore=true;
   //
  constructor(props) {
    super(props)
    this.store = this.props.articleList
    this.storeArc=this.props.article;
    console.log("this.store",this.store)
    //this.renderItem=this.renderItem.bind(this);
  }
  async componentDidMount(){
     if(this.store.scrollPos){
        document.querySelector(".scrollFixed").scrollTo(0,this.store.scrollPos)
     }
     console.log("@#$%$#$%^ scroll",this.store.scrollPos)
     document.querySelector(".scrollFixed").ontouchstart=()=>{
        forceCheck();
     }
     document.querySelector(".scrollFixed").ontouchmove=()=>{
             forceCheck();
     }
     document.querySelector(".scrollFixed").ontouchend=()=>{
        forceCheck();
     }
     document.querySelector(".scrollFixed").onscroll=()=>{
        forceCheck();
     }
     
  }
  componentDidUpdate(){
    forceCheck();
  }
  async loadFunc(){
    forceCheck();
    if(!this.store.hasMore){
        return false;
    }
    this.store.pageInCrease();
    let data=await Server.getTopics({page:this.store.page,limit:5});
    if(data.length<20){
        this.store.noData();
    }
    this.store.push(data.data)
    console.log("this.store.list,:",this.store.list)
  }
  @action.bound
  goDetail(item){
    this.storeArc.setData(item);
    this.store.savePos();
     this.props.history.push(`/article/${item.id}`);
  }
  PlaceholderComponent(){
      return(
          <img src={require("../../assets/imgLoading.gif")}/>
      )
  }
  itemComponent(){
    //   return 和(不能换行 
      return this.store.list.map((item,i)=>{
                    return(
                            <div className="am-list-item" 
                             key={item.id}
                             onClick={()=>this.goDetail(item)}
        
                             >
                                <div className="am-list-thumb">
                                   <LazyLoad height={66}  offset={100}    once placeholder={this.PlaceholderComponent()}>
                                      <img src={item.author.avatar_url} /> 
                                   </LazyLoad>
                                </div>
                                <div className="am-list-content">
                                    <div className="am-list-title">{item.title}</div>
                                    <div className="am-list-brief">
                                            <p>作者: {item.author.loginname}</p>
                                            <p>时间：{item.create_at}</p>
                                    </div>
                                </div>
                            </div>
                      );
           })
  }
  render() {
    return (
        <div className="scrollFixed">
            <InfiniteScroll
                pageStart={0}
                loadMore={this.loadFunc.bind(this)}
                hasMore={this.store.hasMore}
                loader={<ItemLoading key={-1}/>}
                useWindow={false}
            >
                <div className="am-list am-list-ptext">
                            <div className="am-list-body">
                                { this.itemComponent() }
                            </div>
                </div>
            </InfiniteScroll>
           
        </div>                
    )
  }
}
